<template>
	<div class="product">
		<div class="div-top">
			<img src="../../assets/product/zuo.png" />
			<div class="mian-search">
				<img src="../../assets/product/sousuo.png" />
				<p>请输入商品名称搜索</p>
			</div>
		</div>
		<div class="dslist" v-for="item in dslist">
			<div class="dianpu">
				<img :src="item.url1" />
				<div class="content">
					<p>{{item.name}}</p>
					<div class="xiangqing">
						<p>{{item.shouliang}}</p>
						<p>{{item.qisong}}</p>
						<p>{{item.yunfei}}</p>
					</div>
					<div class="vip">
						<span>{{item.vip}}</span>
					</div>
				</div>
			</div>
			<div class="shangpins">
				<div class="shangpins_sp1" v-for="itt in splists">
					<img :src="itt.url" />
					<p>{{itt.danjia}}</p>
					<div class="price">
						<p>{{itt.newprice}}</p>
						<p>{{itt.oldprice}}</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				dslist: [{
						url1: require("../../assets/search/pinpai1.png"),
						name: "沃尔玛",
						shouliang: "月售1万+",
						qisong: "起送¥0",
						yunfei: "基础运费¥5",
						vip: "VIP尊享满89元减4元运费券（每月3张）"
					},
					{
						url1: require("../../assets/search/pinpai2.png"),
						name: "京东7FRESH生鲜",
						shouliang: "月售1万+",
						qisong: "起送¥0",
						yunfei: "全免运费",
						vip: "VIP尊享满89元减4元运费券（每月3张）"
					}, {
						url1: require("../../assets/search/pinpai4.png"),
						name: "百果园",
						shouliang: "月售1万+",
						qisong: "起送¥0",
						yunfei: "全免运费",
						vip: "VIP尊享满89元减4元运费券（每月3张）"
					}
				],
				splists: [{
					url: require("../../assets/search/fanqie.png"),
					danjia: "番茄250g/份",
					newprice: "￥33.6"
				}, {
					url: require("../../assets/search/chengzi.png"),
					danjia: "螃蟹250g/份",
					newprice: "￥33.6",
					oldprice: "￥33.6"
				}, {
					url: require("../../assets/search/caomei.png"),
					danjia: "螃蟹250g/份",
					newprice: "￥33.6",
					oldprice: "￥33.6"
				}]
			}
		}
	}
</script>
<style scoped>
	.div-top {
		margin-top: 16px;
		display: flex;
		padding-left: 18.5px;
		padding-right: 18px;
		align-items: center;
	}

	.div-top img {
		width: 12.3px;
		height: 21.2px;
		padding-right: 16.2px;
	}

	.mian-search {
		height: 32px;
		background: #f5f5f5;
		border-radius: 16px;
		flex: 15;
		display: flex;
		align-items: center;
	}

	.mian-search img {
		width: 16px;
		height: 16px;
		padding-right: 12px;
		padding-left: 16px;
	}

	.mian-search p {
		font-size: 14px;
		color: #333333;
		line-height: 16px;
	}

	.dianpu {
		display: flex;
		padding-left: 8px;
		padding-bottom: 24px;
		padding-top: 16px;
	}

	.dianpu img {
		width: 56px;
		height: 56px;
		padding-right: 16px;
	}

	.content p {
		font-size: 16px;
		color: #333333;
		padding-bottom: 8px;
	}

	.xiangqing {
		display: flex;
	}

	.xiangqing p {
		padding-right: 16px;
		font-size: 13px;
		color: #333333;
		padding-bottom: 8px;
	}

	.content .vip span {
		font-size: 13px;
		color: #E93B3B;
	}

	.shangpins {
		display: flex;
		margin-left: 80px;
	}

	.shangpins_sp1 img {
		width: 80px;
		height: 80px;
		border: 1px solid #C6C6C6;
		margin-right: 10px;
	}

	.shangpins_sp1 p {
		font-size: 12px;
		color: #333333;
		line-height: 16px;
		padding-bottom: 6px;
	}
	.price{
		display: flex;
	}
	.price :nth-child(1){
		font-size: 14px;
		color: #E93B3B;
		padding-right: 12px;
	}
	.price :nth-child(2){
		font-size: 10px;
		color: #999999;
		text-decoration: line-through;
	}
</style>
